<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="../../../vue.js"></script>
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <p>{{person}}</p>
      <br>
      <p>{{person1}}</p>
      <button @click="change">change</button></button>
    </div>
    <script>
      const vm = new Vue({
        el: '#app',
        data() {
          return {
            person: ['小王', '大黄', '小张'],
            person1: [
              { id: 1, name: 'xiaowang' },
              { id: 2, name: 'xiaohuang' },
            ],
          };
        },
        methods: {
          change(){
            // 直接对数组通过下标或者长度等操作,是没有响应式的
            // this.person.length=0
            // 数组中会改变原数组的7个方法能够触发响应式push pop shift unshift sort reverse splice
            // this.person.push('liming')
            // 会返回一个新数组的方法可以通过赋值的方式触发响应式filter()、concat() 和 slice()
            this.person=this.person.filter((item)=>{
              return item.startsWith("小");
            })
          }
        },
      });
    </script>
  </body>
</html>
